<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="搜索"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div class="search-box">
                <div class="search-input-box">
                    <img
                        class="search-icon"
                        src="@/assets/images/home/search-icon.png"
                    />
                    <input
                        class="search-input"
                        type="text"
                        placeholder="马上搜索您的百领好货"
                        v-model="searchKey"
                        ref='searchInput'
                    />
                </div>
                <div
                    class="search-btn"
                    @click="goSearch(searchKey,1)"
                >搜索</div>
            </div>

            <div class="latest-search-box">
                <div class="latest-search-top">
                    <div class="search-title">最近搜索</div>
                    <img
                        class="search-delete"
                        src="@/assets/images/home/search-delete.png"
                        @click="deleteHistory"
                    />
                </div>
                <div class="latest-search-list">
                    <div
                        class="latest-search-item"
                        v-for="(item,index) of searchHistory.slice(0,10)"
                        :key="index"
                        @click="goSearch(item,0)"
                    >{{item}}</div>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'SearchPage',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0',
                background: '#fff',
                padding: '0.3rem'
            },
            searchKey: '',
            searchHistory: []
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.$refs.searchInput.focus()
        })
        this.getSearchHistory()
    },
    methods: {
        getSearchHistory() {
            if (sessionStorage.getItem('searchHistory')) {
                this.searchHistory = JSON.parse(
                    sessionStorage.getItem('searchHistory')
                )
            } else {
                this.searchHistory = []
            }
        },
        goSearch(value, type) {
            if (value) {
                if (type == 0) {
                    this.$router.push('/searchResult?searchKey=' + value)
                } else {
                    this.searchHistory.unshift(value)
                    sessionStorage.setItem(
                        'searchHistory',
                        JSON.stringify(this.searchHistory)
                    )
                    this.$router.push('/searchResult?searchKey=' + value)
                }
            }
        },
        deleteHistory() {
            const that = this
            this.commonDialog.confirm('提示', '确认清空搜索记录？', function() {
                sessionStorage.removeItem('searchHistory')
                that.getSearchHistory()
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.search-box
    display flex
    align-items center
    .search-input-box
        display flex
        flex 1
        align-items center
        height 0.93rem
        padding 0 0.4rem
        background #e5e5e5
        border-radius 3px
        overflow hidden
        .search-icon
            width 0.34rem
        .search-input
            flex 1
            padding 0 0.2rem
            background #e5e5e5
            font-size 0.34rem
            color #333
            line-height 1
    .search-btn
        font-size 0.38rem
        color #888
        line-height 1
        margin-left 0.3rem
.latest-search-box
    margin-top 0.67rem
    .latest-search-top
        display flex
        align-items center
        justify-content space-between
        .search-title
            font-size 0.37rem
            color #888
            line-height 1
        .search-delete
            width 0.37rem
    .latest-search-list
        display flex
        flex-wrap wrap
        margin-top 0.34rem
        .latest-search-item
            padding 0.2rem 0.4rem
            background #f5f5f5
            font-size 0.32rem
            color #131313
            line-height 1
            border-radius 30px
            margin-right 0.3rem
            margin-bottom 0.3rem
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
</style>

